<template>
    <div class="device">
        <mt-header fixed title="设备清单管理" id="header1"></mt-header>
        <div class="back" @click="backPage">
            <img src="../assets/image/back.png" alt="" />
        </div>
        <div class="deviceContent">
            <div class="attribute">
                <p>设备属性</p>
                <div class="img">
                    <img src="../assets/image/timg.jpg" alt="">
                </div>
                <div>
                    <el-form ref="form" :model="form" label-width="100px" id="form1">
                        <el-form-item label="站长">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item label="最近维护时间">
                            <el-date-picker type="date" placeholder="yy-mm-dd" v-model="form.date3" style="width: 85%;"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="经度">
                            <el-input v-model="form.date1"></el-input>
                        </el-form-item>
                        <el-form-item label="纬度">
                            <el-input v-model="form.date2"></el-input>
                        </el-form-item>
                        <el-form-item label="站名">
                            <el-input v-model="form.delivery"></el-input>
                        </el-form-item>
                        <el-form-item label="联系地址">
                            <el-input v-model="form.resource"></el-input>
                        </el-form-item>
                        <el-form-item label="电话">
                            <el-input v-model="form.desc"></el-input>
                        </el-form-item>
                        <el-form-item label="服务方式">
                            <el-input v-model="form.type"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="dangan">
                <p>设备故障信息</p>
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column type="index" fixed>
                        </el-table-column>
                        <el-table-column prop="name" label="设备名称" width="120" fixed>
                        </el-table-column>
                        <el-table-column prop="check" label="维护标准">
                        </el-table-column>
                        <el-table-column prop="zhouqi" label="维护类型">
                        </el-table-column>
                        <el-table-column prop="time" label="周期(天)">
                        </el-table-column>
                        <el-table-column prop="date" label="最近维护日期" width="120">
                        </el-table-column>
                        <el-table-column prop="yuzhi" label="阀值">
                        </el-table-column>
                        <el-table-column prop="canshu" label="阀值参数">
                        </el-table-column>
                        <el-table-column prop="shijizhi" label="实际值">
                        </el-table-column>
                        <el-table-column prop="content" label="内容" width="120">
                        </el-table-column>
                        <el-table-column prop="yesOrno" label="是否故障">
                        </el-table-column>
                    </el-table>
            </div>
            <div class="deviceInfo">
                 <p>设备档案</p>
                 <el-table :data="tableData" style="width: 100%">
                    <el-table-column type="index" fixed>
                    </el-table-column>
                    <el-table-column prop="name" label="任务序列号" width="120">
                    </el-table-column>
                    <el-table-column prop="check" label="相关雷达站" width="120" fixed>
                    </el-table-column>
                    <el-table-column prop="zhouqi" label="相关海事局" width="120">
                    </el-table-column>
                    <el-table-column prop="time" label="报告类型">
                    </el-table-column>
                    <el-table-column prop="date" label="归档时间" width="120">
                    </el-table-column>
                    <el-table-column prop="yuzhi" label="知识库搜索关键字" width="200">
                    </el-table-column>
                    <el-table-column prop="canshu" label="相关设备">
                    </el-table-column>
                    <el-table-column prop="shijizhi" label="工作报告">
                    </el-table-column>
                    <el-table-column prop="content" label="操作" width="120">
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            form:{
                name: '蔡站长',
                region: '',
                date1: '113.9952290',
                date2: '22.6850830',
                delivery: '莲花山雷达站',
                type: '维修',
                resource: '广州市莲花水乡',
                desc: '1392514268',
                date3:''
            },
             tableData: [{
                date: '2016-05-02',
                name: '莲花山雷达站',
                zhouqi:'周期',
                time:90,
                yuzhi:8000,
                canshu:'大于',
                shijizhi:5400,
                yesOrno: '是',
                check:'例行巡检',
                content:'季度性巡检'
            }, {
                date: '2016-05-02',
                name: '莲花山雷达站',
                zhouqi:'周期',
                time:90,
                yuzhi:8000,
                canshu:'大于',
                shijizhi:5400,
                yesOrno: '是',
                check:'例行巡检',
                content:'季度性巡检'
            }, {
                date: '2016-05-02',
                name: '莲花山雷达站',
                zhouqi:'周期',
                time:90,
                yuzhi:8000,
                canshu:'大于',
                shijizhi:5400,
                yesOrno: '是',
                check:'例行巡检',
                content:'季度性巡检'
            }, {
                date: '2016-05-02',
                name: '莲花山雷达站',
                zhouqi:'周期',
                time:90,
                yuzhi:8000,
                canshu:'大于',
                shijizhi:5400,
                yesOrno: '是',
                check:'例行巡检',
                content:'季度性巡检'
          }]
        }
    },
    methods:{
        backPage(){
            this.$parent.$router.go(-1);
        }
    }
}
</script>
<style scoped lang="scss">
    .device{
        width:100vw;
        position:relative;
        overflow: hidden;
        .back{
            position:fixed;
            left:0;
            top:0;
            width:10vw;
            height:40px;
            z-index:7;
            img{
                margin-top:4px;
                display:block;
            }
        }
        .deviceContent{
            width:100vw;
            overflow: hidden;
            margin-top:2.5rem;
            .attribute{
                width:96vw;
                margin:0 auto 50px;
                overflow: hidden;
                p{
                    line-height:30px;
                    padding-left:3vw;
                }
                .img{
                    width:100%;
                    height:20vh;
                    img{
                        height:100%;
                        width:100%;
                    }
                }
            }
            .dangan{
                width:96vw;
                margin:0 auto 50px;
                overflow: hidden;
                p{
                    line-height:30px;
                    padding-left:3vw;
                }
            }
            .deviceInfo{
                width:96vw;
                margin:0 auto 100px;
                overflow: hidden;
                p{
                    line-height:30px;
                    padding-left:3vw;
                }
            }
        }
    }
</style>
